<template>
    <div class="search">
        <div>
            <div class="vip-search">
                <input type="text" placeholder="输入搜索内容..." v-model="searchText">
                <i @click="search"></i>
            </div>
        </div>
        
        <div class="search-history">
            <p>历史搜索</p>
            <router-link :to="'/'">qwe</router-link>
            <router-link :to="'/'">iop</router-link>
            <router-link :to="'/'">iopsdf</router-link>
        </div>
        <div class="search-history">
            <p>大家都在搜</p>
            <a v-for="(item,index) in Hot" @click="hotSearch($event)">{{item.content}}</a>
        </div>
    </div>
</template>

<script>
import qs from 'qs'
import wx from 'weixin-jsapi'
import url from 'url'
    export default {
        name:'SpikeSearch',
        data () {
            return {
                Hot:[],
                searchText:''
            }
        },
        methods:{
            //大家都在搜
            getHot:function(){
                var uo = url.parse(window.location.href, true)
                console.log(uo)
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_type:1,
                }
                that.$http.post('/vipmember/index/getHot',qs.stringify(draw)).then(res=>{
                    console.log(res)
                    this.Hot = res.data;
                }).catch(err=>{
                    console.log(err)
                })
            },
            
            // 搜索
            search:function(){
                console.log(this.searchText)
                this.$router.push({path:'SpikeSearchList',query:{ search : this.searchText }});
            },
            // 大家都在搜
            hotSearch:function(e){
                console.log(e.target.innerHTML)
                this.$router.push({path:'SpikeSearchList',query:{ search : e.target.innerHTML }});
            },
        },
        mounted(){
            this.getHot();
        }
    }
</script>

<style scoped>
.search-history P{
    font-weight: 600;
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
}
.search-history a{
    display: inline-block;
    border-radius: 20px;
    float:left;
    padding: 5px 12px;
    color: #FC2847;
    background: rgba(252, 40, 71, 0.2);
    margin-right: 8px;
    margin-bottom: 10px;
}
.search{
    width:94%;
    display: inline-block;
    margin-left:3%;
}
.vip-search{
	width:100%;
	margin:15px auto;
	background: #FC2847;
    border-radius: 20px;
    overflow: hidden;
}
.vip-search input{
    padding: 10px 16px;
    width: 76%;
    background: transparent;
    border: 0;
    color: #FFF;
}
.vip-search i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/sousuo.png) no-repeat;
    background-size: 100%;
    margin-top: 8px;
    float: right;
    margin-right: 15px;
}
input::-webkit-input-placeholder{
    color:#FFF;
}
</style>